<html xmlns="http://www.w3.org/1999/xhtml">
<head>                                            
<title>统计分析</title>              
<block th:replace="commonBase"></block>  
<script th:src="@{/common/js/echarts.js}"></script>      
<!-- LayUI   -->  
<link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}"/>  
<script th:src="@{/plugins/layui/layui.js}" type="text/javascript"></script>                  
</head>  
<style>
	.container
    {
        padding:20px;
        height: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .container .mini-panel
    {
        margin-right:20px;
        margin-bottom:10px;
    }
    
    .mini-widget-header, .app-header, .app-toolbar, .bg-toolbar, .mini-panel-header, .mini-window .mini-panel-header, .mini-outlookbar .mini-outlookbar-groupHeader, .mini-outlookbar-expand .mini-outlookbar-groupHeader, .mini-outlookbar-view2 .mini-outlookbar-groupHeader, .mini-layout-region-header, .mini-layout-proxy, .mini-calendar-header, .mini-tabs-scrollCt, .mini-tabs .mini-tabs-space, .mini-tabs .mini-tabs-space2 {
	    border-color: #F0F1F5;
	    background: #fff;
	    color: #333;
	    font-size: 14px;
	}
	
	.mini-panel-border {
         border-radius: 1px;
     	 border: 1px solid #eaeaea;
     	 margin: 10px;
     	 box-shadow: 0 0 3px #ccc;
	    overflow: hidden;
	    position: relative;
	}
	
	.mini-panel .mini-panel-icon {
	    margin-right: 2px;
	    color: #1D9DE1;
	}
	
	
	.mini-panel-header-inner {
	    padding: 12px 12px 12px 12px;
	    font-size: 14px;
	    font-weight:600;
	    font-family: 微软雅黑;
	}
		
 </style>
<body> 	  
 <div class="container">
	<div style="width: 100%;height: 40%;">
	    <div class="mini-clearfix ">
            <div class="mini-col-6">
                <div class="mini-panel" title="路况检测数据" width="auto"  style="font-size: 14px;" iconCls="fa fa-bookmark-o" 
                    showCollapseButton="false" showCloseButton="false">
                     <div id="chart1" style="width: 90%;height: 100%;">6/12</div>
                </div>

            </div>
            <div class="mini-col-6">
                
                <div class="mini-panel mini-panel-primary" title="长大桥隧检测数据" width="auto"  style="font-size: 14px;" iconCls="fa fa-bookmark-o"
                   showCollapseButton="false" showCloseButton="false" >
                   <div id="chart2" style="width: 90%;height: 100%;">6/12</div>
                </div>

            </div>
        </div>
	   
	</div>
	<div class="mini-fit" style="width: 100%;height: 60%;">
		<div class="mini-clearfix" style="height: calc(100% - 160px);">
            <div class="mini-col-4">
                <div class="mini-panel" title="路面检测数据" width="auto"  style="font-size: 14px;" iconCls="fa fa-bookmark-o" 
                    showCollapseButton="false" showCloseButton="false">
                     <div id="chart3" style="width: 80%;height: 100%;">4/12</div>
                </div>

            </div>
            <div class="mini-col-4">
                
                <div class="mini-panel mini-panel-primary" title="桥梁检测数据" width="auto"  style="font-size: 14px;" iconCls="fa fa-bookmark-o"
                   showCollapseButton="false" showCloseButton="false" >
                   <div id="chart4" style="width: 80%;height: 100%;">4/12</div>
                </div>

            </div>
            <div class="mini-col-4">
                
                <div class="mini-panel mini-panel-primary" title="隧道检测数据" width="auto"  style="font-size: 14px;" iconCls="fa fa-bookmark-o"
                   showCollapseButton="false" showCloseButton="false" >
                   <div id="chart5" style="width: 80%;height: 100%;">4/12</div>
                </div>

            </div>
        </div>
	</div>
</div>		
</body>     
	<script th:inline="javascript" type="text/javascript">
		/*<![CDATA[*/  
		
				var option1 = {
					  tooltip : {
					        show: true,
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient : 'vertical',
					        x : 'left',
					        data:['未检测里程','已检测里程']
					    },
				    color:['#f5a223','#47a2f6'],
				    series: [
				        {
				            name:'路况检测数据',
				            type:'pie',
				            radius : 80,
				            itemStyle : {
				                normal : {
				                    label : {
				                        position : 'outer',
				                        formatter : function (params) {                         
				                          return params.name+ (params.percent - 0).toFixed(0) + '%'
				                        }
				                    },
				                    labelLine : {
				                        show : true
				                    }
				                },
				                emphasis : {
				                    label : {
				                        show : true,
				                        formatter : "{b}\n{d}%"
				                    }
				                }
				                
				            },
				            data:[
				                {value:2700, name:'未检测里程'},
				                {value:11000, name:'已检测里程'}
				            ]
				        }
				    ]
				};

			var option2 = {
					  tooltip : {
					        show: true,
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient : 'vertical',
					        x : 'left',
					        data:['特殊情况报警','正常情况']
					    },
				    color:['#F47777','#47a2f6'],
				    series: [
				        {
				            name:'长大桥隧检测数据',
				            type:'pie',
				            radius : 80,
				            itemStyle : {
				                normal : {
				                    label : {
				                        position : 'outer',
				                        formatter : function (params) {                         
				                          return params.name+ (params.percent - 0).toFixed(0) + '%'
				                        }
				                    },
				                    labelLine : {
				                        show : true
				                    }
				                },
				                emphasis : {
				                    label : {
				                        show : true,
				                        formatter : "{b}\n{d}%"
				                    }
				                }
				                
				            },
				            data:[
				                {value:3000, name:'特殊情况报警'},
				                {value:31000, name:'正常情况'}
				            ]
				        }
				    ]
				};


			var option3 =  {
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    color:["#00c600","#00fdbb",'#ffff00','#ffa800',"#ff3737"],
				    series: [
				        {
				            name:'检测数据',
				            type:'pie',
				            radius: ['50%', '70%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center'
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '30',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:875, name:'优'},
				                {value:229, name:'良'},
				                {value:187, name:'中'},
				                {value:137, name:'次'},
				                {value:77, name:'差'}
				            ]
				        }
				    ]
				};    

			var option4 =  {
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    series: [
				        {
				            name:'检测数据',
				            type:'pie',
				            radius: ['50%', '70%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center'
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '30',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:335, name:'检测1'},
				                {value:310, name:'检测2'},
				                {value:234, name:'检测3'},
				                {value:135, name:'检测4'}
				            ]
				        }
				    ]
				};    

			var option5 =  {
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    color:["#96bfff","#ff5d44",'#5d5c40','#d1d1d1'],
				    series: [
				        {
				            name:'检测数据',
				            type:'pie',
				            radius: ['50%', '70%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center'
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '30',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:335, name:'检测1'},
				                {value:310, name:'检测2'},
				                {value:234, name:'检测3'},
				                {value:135, name:'检测4'}
				            ]
				        }
				    ]
				};             

			

			$(function(){
				var chart1 = echarts.init(document.getElementById('chart1'));
				chart1.setOption(option1);
				var chart2 = echarts.init(document.getElementById('chart2'));
				chart2.setOption(option2);

				var chart3 = echarts.init(document.getElementById('chart3'));
				chart3.setOption(option3);

				var chart4 = echarts.init(document.getElementById('chart4'));
				chart4.setOption(option4);

				var chart5 = echarts.init(document.getElementById('chart5'));
				chart5.setOption(option5);

				setTimeout(function (){
				    window.onresize = function () {
				    	chart1.resize();
				    	chart2.resize();
				    	chart3.resize();
				    	chart4.resize();
				    	chart5.resize();
				    }
				},200)
			});

		

			
			
		
		
		/*]]>*/
	</script>
</html>